<template>
  <div class="menu-container">
    <div class="search-box">
      <el-form size="mini" :model="searchForm" inline ref="searchFormRef" label-suffix="：" label-width="100px" >
        <el-form-item label="菜单名称" prop="menuName">
          <el-input v-model="searchForm.menuName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearchForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="btn-wrapper">
      <el-button size="small" @click="addMenu()">新建</el-button>
    </div>
    <div class="table-wrapper">
      <el-table v-loading="tableLoading" size="mini" stripe border :data="tableData" row-key="id">
        <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
        <el-table-column label="菜单名称" prop="name"></el-table-column>
        <el-table-column label="图标">
          <template v-slot="{row}">
            <i :class="row.icon"></i>
          </template>
        </el-table-column>
        <el-table-column label="排序" prop="sort"></el-table-column>
        <el-table-column label="创建时间" prop="createTime"></el-table-column>
        <el-table-column label="修改时间" prop="updateTime"></el-table-column>
        <el-table-column label="操作">
          <template v-slot="{row}">
            <el-button size="mini" type="text" @click="addMenu(row.id)">新增</el-button>
            <el-button size="mini" type="text" @click="editMenu(row.id)">修改</el-button>
            <el-button size="mini" type="text" @click="delMenu(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="新增/修改" v-model="visible" width="600px" @close="resetMenuForm" destroy-on-close :close-on-click-modal="false">
      <el-form size="mini" :model="menuFormReactive.menuForm" ref="menuFormRef" :rules="rules" label-width="100px" label-suffix="：">
        <el-form-item label="父菜单">
          <tree-select :clearable="false" v-model="menuFormReactive.menuForm.parentId" :options="treeSelectOptions"></tree-select>
        </el-form-item>
        <el-form-item label="菜单名称" prop="name">
          <el-input v-model="menuFormReactive.menuForm.name"></el-input>
        </el-form-item>
        <el-form-item label="图标" prop="icon">
          <el-input v-model="menuFormReactive.menuForm.icon"></el-input>
        </el-form-item>
        <el-form-item label="访问路径" prop="path">
          <el-input v-model="menuFormReactive.menuForm.path"></el-input>
        </el-form-item>
        <el-form-item label="组件地址" prop="component">
          <el-input v-model="menuFormReactive.menuForm.component"></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="排序"  prop="sort">
            <el-input-number :min="0" model-value="sort" v-model="menuFormReactive.menuForm.sort"></el-input-number>
          </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="显示/隐藏" prop="isShowMenu">
              <el-radio-group v-model="menuFormReactive.menuForm.isShowMenu">
                <el-radio :label="1">显示</el-radio>
                <el-radio :label="0">隐藏</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <el-button type="primary" size="small" @click="submit">提交</el-button>
        <el-button type="danger" size="small" @click="visible = false">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import {defineComponent} from 'vue'
import useSearch from "@/views/system/menu/hooks/useSearch";
import useTable from "@/views/system/menu/hooks/useTable";
import useForm from "@/views/system/menu/hooks/useForm";
import TreeSelect from "vue-treeselect-next"
import "vue-treeselect-next/dist/vue-treeselect.css"
export default defineComponent({
  name:'Menu',
  components:{TreeSelect},
  setup(){
    const {tableLoading,tableData,getDataList,treeSelectOptions} = useTable()
    getDataList()
    return {
      treeSelectOptions,
      tableLoading,
      tableData,
      ...useSearch(),
      ...useForm()
    }
  },
  mounted() {
    console.log('menu page')
  }
})
</script>
<style lang="scss" scoped>
.menu-container{
  padding: 5px;
}
</style>
